<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>雇员列表</title>
    <!-- Bootstrap core CSS-->
    <link href="/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link href="/sb/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
    <link href="/sb/vendor/datatables/select.bootstrap.min.css" rel="stylesheet">
    <link href="/css/scrollbar.css" rel="stylesheet">
    <link href="/css/default.css" rel="stylesheet">

    <style type="text/css">
        .select2-selection__rendered {
            display: none;
        }
    </style>
</head>

<body class="bg-dark scroll-style">

<!-- Breadcrumbs-->
<ol class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="javascript:void(0)">雇员管理</a>
    </li>
    <li class="breadcrumb-item active">雇员列表</li>
</ol>
<!-- Example DataTables Card-->
<div class="card mb-3">
    <!--
    <div class="card-header">
        <i class="fa fa-table"></i> 雇员列表
    </div>
    -->
    <div class="card-body">
        <div class="table-responsive scroll-style">
            <table class="table table-bordered" id="employee" width="100%" cellspacing="0">
            </table>
        </div>
    </div>
    <!--<div class="card-footer small text-muted">最后更新时间：11:59 PM</div>-->
</div>

<!-- Bootstrap core JavaScript-->
<script src="/sb/vendor/jquery/jquery.min.js"></script>
<script src="/sb/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="/sb/vendor/datatables/jquery.dataTables.js"></script>
<script src="/sb/vendor/datatables/dataTables.bootstrap4.js"></script>
<script src="/sb/vendor/datatables/dataTables.select.min.js"></script>
<!-- Custom scripts for this page-->
<script src="/layer/layer.js"></script>
<script src="/js/jquery.form.js"></script>
<script src="/js/jquery.formautofill.min.js"></script>
<script src="/select2/js/select2.full.js"></script>
<script src="/select2/js/i18n/zh-CN.js"></script>
<script src="/js/util.js"></script>
<script src="/js/render.js"></script>
<script src="/js/select.js"></script>
<script src="/js/my.datatables.server.js"></script>

<script type="text/javascript">
    layer.config({
        extend: '/extend/layer.ext.js'
    });

    var update;

    $(document).ready(function () {

        var tools = '\
            <div class="btn-group">\
                <a class="btn btn-info fa fa-plus-square-o" \
                    data-toggle="modal" \
                    data-target="#addModal">&nbsp;新增</a>\
                <a class="btn btn-info fa fa-edit" onclick="update()">&nbsp;更新</a>\
                <a class="btn btn-info btn-delete fa fa-minus-square-o">&nbsp;删除</a>\
            </div>\
        ';

        // 列配置
        var grid = $('#employee').DGrid({
            gridName: 'tb_employee', // 给 grid起个名
            tools: tools, // 操作按钮组
            sequence: true,
            removeUrl: '/employee/deleteByIds',
            gridOptions: {
                ajax: {
                    type: 'POST',
                    url: '/employee/page' // 分页url
                },
                order: [[2, 'desc']]
            },
            fnServerParams: function (aoData) {
                aoData['searchFields'] = ['name'].join(',');
            },
            searchTip: '请输入雇员名称',
            add: {
                title: '添加雇员',
                url: '/employee/add'
            },
            update: {
                title: '更新雇员',
                url: '/employee/update',
                detailUrl: '/employee/detail'
            }
        });

        // 更新方法
        update = function () {
            var ok = grid.fillUpdateModel();
            if (ok) {
                grid.reload();
                $('#btnUpdateModel').trigger('click');
            }
        };
    });
</script>
<script src="/js/form.init.js"></script>
</body>
</html>
